<template>
  <div class="manage_container">
    <div class="manage_operate">
      <el-button type="text" @click="showAddUsercontainer">
        <el-icon> <Plus /> </el-icon>
        <span>新增</span>
      </el-button>
      <div class="search_operate">
        <el-input
          v-model="search"
          placeholder="搜索用户"
          @keyup.enter="handleSearchInput"
        />
        <span @click="loadUsers">
          <el-icon>
            <RefreshLeft />
          </el-icon>
        </span>
      </div>
    </div>
    <div class="manage-table">
      <el-table
        :data="filteredTableData"
        style="width: 100%"
        :row-style="{ height: '40px' }"
      >
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="username" label="用户名" width="120" />
        <el-table-column prop="type" label="用户类型" width="120" />
        <el-table-column prop="status" label="登录状态" width="100" />
        <el-table-column prop="operate" label="操作" width="230">
          <template #default="scope">
            <el-button type="primary" @click="resetPasswordFn(scope.row)"
              >重置</el-button
            >
            <el-button type="danger" @click="deleteUserFn(scope.row)"
              >注销</el-button
            >
            <!-- 如果状态为离线，则不显示下线按钮 -->
            <el-button v-if="scope.row.status !== '离线'" type="success"
              >下线</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="add_user_container" v-if="addUsercontainer">
    <el-input v-model="newUser.username" placeholder="请输入用户名" />
    <el-select v-model="newUser.type" placeholder="请选择用户类型">
      <el-option label="交管部门" value="traffic"></el-option>
      <el-option label="普通用户" value="user"></el-option>
    </el-select>
    <el-input v-model="newUser.password" placeholder="请输入密码" />
    <div class="operate_btn">
      <el-button type="primary" @click="addUser">添加</el-button>
      <el-button @click="addUsercontainer = false">取消</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, computed } from 'vue';
import { RefreshLeft, Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
const addUsercontainer = ref(false); // 新增用户弹窗的显示状态
const tableData = ref([]);
const search = ref(''); // 搜索框的绑定变量

import {
  getAllUsers,
  registerUser,
  resetPassword,
  deleteUser,
} from '../apis/index.js';

const newUser = ref({
  username: '',
  type: 'user',
  password: '111111',
}); // 新增用户的绑定变量

// 点击新增按钮，显示新增用户弹窗
function showAddUsercontainer() {
  addUsercontainer.value = true;
}

// 添加计算属性来处理搜索逻辑
const filteredTableData = computed(() => {
  if (!search.value) {
    return tableData.value;
  }
  return tableData.value.filter((item) => {
    return item.username.includes(search.value);
  });
});

// 添加搜索处理
const handleSearchInput = async () => {
  await loadUsers();
};

const loadUsers = async () => {
  try {
    getAllUsers().then((data) => {
      if (data.status === 200) {
        tableData.value = data.data
          .filter((item) => item.type !== 'admin')
          .map((item, index) => ({
            id: index + 1,
            username: item.username,
            type: item.type === 'traffic' ? '交管部门' : '普通用户',
            status: '离线',
          }));
      }
    });
  } catch (error) {
    ElMessage.error('用户数据加载失败');
  }
};
// 初始化加载用户列表
loadUsers();
// 新增用户方法
const addUser = async () => {
  if (!newUser.value.username) {
    return;
  }
  registerUser(newUser.value).then((data) => {
    if (data.data.status === 1) {
      ElMessage.success('添加成功');
      addUsercontainer.value = false;
    } else if (data.data.status === 0) {
      ElMessage.error('用户已存在');
    }
  });
};

// 重置密码方法
const resetPasswordFn = (user) => {
  user.type = user.type == '交管部门' ? 'traffic' : 'user';
  resetPassword(user).then((data) => {
    console.log(data);
    if (data.data.status === 1) {
      ElMessage.success('重置成功');
    } else if (data.data.status === 0) {
      ElMessage.error('重置失败');
    }
  });
};

//删除
const deleteUserFn = (user) => {
  user.type = user.type == '交管部门' ? 'traffic' : 'user';
  deleteUser(user).then((data) => {
    console.log(data);
    if (data.data.status === 1) {
      ElMessage.success('注销成功');
    } else {
      ElMessage.error('注销失败');
    }
  });
};
</script>
<style scoped lang="scss">
.manage_container {
  padding: 20px;
  .manage_operate {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-button {
      display: flex;
      align-items: center;
      gap: 10px;
      .el-icon {
        font-size: 16px;
      }
    }
    .search_operate {
      display: flex;
      align-items: center;
      gap: 10px;
      .el-input {
        height: 28px;
        :deep(.el-input__wrapper) {
          border: 1px solid #999;
          box-shadow: none;
        }
        .el-input__wrapper.is-focus {
          border: 1px solid #999;
          box-shadow: none;
        }
      }
      .el-icon {
        font-size: 20px;
      }
    }
  }
  .manage-table {
    margin-top: 10px;
  }
}
.add_user_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
  padding: 20px;
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 1000;
  .operate_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
